/*
 * @Author: your name
 * @Date: 2021-04-06 18:04:49
 * @LastEditTime: 2021-04-06 19:11:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /zuanji-demo/src/chart/fectLineChart.js
 */
import { Chart } from '@antv/g2'

export const fectLineChart = (option) => {
  const { container, width, height, data, position, unit = 'bar', yAlias = '压力' } = option
  const chart = new Chart({
    width,
    height,
    container,
    appendPadding: [20, 60, 20, 40]
  })

  chart.data(data)

  chart.legend(false)

  chart.tooltip({
    showCrosshairs: true,
    crosshairs: {
      type: 'x',
      text: {
        style: {
          fontSize: 16
        }
      }
    },
    itemTpl: `<div class="g2-tooltip-list-item">
      <div class="g2-tool-tip-marker"></div>
      <div class="g2-tooltip-name">{name}:</div>
      <div class="g2-tooltip-value">{value} ${unit}</div>
      </div>`,
    domStyles: {
      'g2-tooltip-title': {
        textAlign: 'left'
      },
      'g2-tooltip-list-item': {
        display: 'flex',
        justifyContent: 'space-between'
      }
    }
  })
  const axis = position.split('*')
  const obj = {}
  obj[`${axis[0]}`] = {
    alias: '水平深度'
  }
  obj[`${axis[1]}`] = {
    alias: `${yAlias}(${unit})`
  }
  chart.scale(obj)
  chart.axis(axis[1], {
    title: {
      style: {
        fontSize: 16
      }
    }
  })
  chart.axis(axis[0], {
    title: {
      style: {
        fontSize: 16
      }
    }
  })

  chart.facet('rect', {
    rowTitle: {
      style: {
        fontSize: 12
      }
    },
    fields: [null, 's'],
    padding: 10,
    eachView: (view) => {
      view.line().position(position).color('s')
    }
  })
  chart.interaction('element-highlight')

  chart.render()
  return chart
}
